<template>
	<view>
		<view class="wenzi">
			<view class="wenzitext">
				<text>用户名</text>
			</view>
			<u--input class="shurukuang" placeholder="请输入用户名" border="surround" v-model="userName" @change="change">
			</u--input>
		</view>
		<view class="wenzi">
			<view class="wenzitext">
				<text>电话号码</text>
			</view>
			<u--input class="shurukuang" placeholder="请输入电话号码" border="surround" v-model="userTelephone"
				@change="change">
			</u--input>
		</view>
		<view class="wenzi">
			<view class="wenzitext">
				<text>电子邮箱</text>
			</view>
			<u--input class="shurukuang" placeholder="请输入电子邮箱" border="surround" v-model="userEmail" @change="change">
			</u--input>
		</view>
		<view class="wenzi">
			<view class="wenzitext">
				<text>用户签名</text>
			</view>
			<u--input class="shurukuang" placeholder="请输入用户签名" border="surround" v-model="userIntroduce"
				@change="change">
			</u--input>
		</view>
		<view class="wenzi">
			<view class="wenzitext">
				<text>用户地址</text>
			</view>
			<u--input class="shurukuang" placeholder="请输入用户地址" border="surround" v-model="userAddress" @change="change">
			</u--input>
		</view>
		<view class="wenzi">
			<view class="wenzitext">
				<text>用户生日</text>
			</view>
			<view>
				<u-datetime-picker :show="show" v-model="userBrith" mode="date" @confirm="confirm" @cancel="cancel"
				minDate=0  ></u-datetime-picker>
				<u-button @click="isShow">打开</u-button>
			</view>
		</view>
		<view class="wenzi">
			<view class="wenzitext">
				<text>歌单类型</text>
			</view>
			<view>
				<u-radio-group v-model="loveStyle" iconPlacement="right" placement="column" borderBottom>
					<u-radio activeColor="blue" label="民谣" name="民谣"></u-radio>
					<u-radio activeColor="blue" label="轻音乐" name="轻音乐"></u-radio>
					<u-radio activeColor="blue" label="流行" name="流行"></u-radio>
					<u-radio activeColor="blue" label="说唱" name="说唱"></u-radio>
					<u-radio activeColor="blue" label="爵士" name="爵士"></u-radio>
					<u-radio activeColor="blue" label="摇滚" name="摇滚"></u-radio>
				</u-radio-group>
			</view>
			<button type="primary" class="bu" @tap="sub">提交信息</button>
			<view style="height: 50rpx;"></view>
		</view>

	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				userBrith: Number(new Date()),
				userName: '',
				userTelephone: '',
				userEmail: '',
				userIntroduce: '',
				userAddress: '',
				loveStyle: '',
			};
		},
		computed:{
			...mapState('user',['userInfo'])
		},
		methods: {
			...mapMutations('user',['updateUserInfo']),
			isShow() {
				this.show = !this.show
			},
			async confirm(e) {
				this.show = false;
				const timeFormat = uni.$u.timeFormat;
				let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
				this.userBrith = timeValue
				console.log(timeValue);
			},
			cancel(){
				this.show = false
			},
			change(e) {
				console.log('change', e);
			},
			async sub(){
				console.log(this.userBrith);
				console.log(this.userName);
				console.log(this.userTelephone);
				console.log(this.userEmail);
				console.log(this.userIntroduce);
				console.log(this.userAddress);
				console.log(this.loveStyle);
				console.log(this.userInfo.userId);
				const {data:res} = await uni.$http.post("/user/updateUser",{
					userBrith:this.userBrith,
					userName:this.userName,
					userTelephone:this.userTelephone,
					userEmail:this.userEmail,
					userIntroduce:this.userIntroduce,
					userAddress:this.userAddress,
					loveStyle:this.loveStyle,
					userId:this.userInfo.userId
				})
				console.log(res);
				if(res.code==200){
					uni.removeStorage({
						key:"userinfo"
					})
					this.updateUserInfo(res.data);
					uni.navigateBack()
					uni.showToast({
						duration:1000,
						icon:'success',
						title:"修改成功"
					})
				}else{
					uni.showToast({
						duration:1000,
						icon:"error",
						title:"修改失败"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.wenzi {
		margin: 30rpx 40rpx;
	}

	.wenzitext {
		font-size: 35rpx;
		font-weight: 600;
		color: #5c5c5c;
		margin: 10rpx 0;
	}

	.shurukuang {
		margin: 10rpx 0;
	}
</style>
